<!--
 * @Description: 网站检测数据
 * @Author: hanyu
 * @Date: 2022-03-03 14:03:47
 * @LastEditTime: 2022-03-16 16:18:19
 * @LastEditors: hanyu
-->
<template>
    <div class='page-box'>
        <div class="page-left">
            <!--  -->
            <div class="button-item-box" :class="{'active-item': activeId == 2}" @click="onAdd(2)">
                <div class="button-item add-item" v-if="activeId !=2">
                    新增
                </div>
                <div class="flex-a-center active-add" v-else>
                    <img class="add-icon-h" src="@/assets/img/add-l.png" alt="">
                    新增
                </div>
            </div>
            <div class="button-item-box">
                <div class="button-item del-item" @click="onDel">
                    删除
                </div>
            </div>
            <div class="tab-item">
                <div class="item-title" :class="{'active-tab': activeId == 1}" @click="onList">
                    分 类
                </div>
                <div class="item-desc" v-for="(tItem, index) in categoryList" :key="index" :class="{'active-desc': sendParams.filing_type == index}" @click="onType(index)">
                    {{tItem.cate_name}}
                </div>
            </div>
        </div>
        <div class="page-right">
            <div class="table-box">
                <AddData :itemData="itemData" :disabled="disabled" @toList="toList" v-if="activeId == 2" />
                <template v-else>
                  <div class="table-content">
                    <Table @on-selection-change="handleSelectChange" stripe :columns="table.columns" :data="table.data">
                      <div @click="onEdit(row, true)" slot="website_name"  class="main-color pointer" slot-scope="{row}">
                        {{row.website_name}}
                      </div>
                      <div slot="website_domain" class="one-row" slot-scope="{row}">
                        {{row.website_domain}}
                      </div>
                        <div slot="action" slot-scope="{row}">
                            <a @click="onEdit(row)">
                                编辑
                            </a>
                        </div>
                    </Table>
                  </div>
                    <Pagination class="pageination-box" style="margin-top: 20px" :pageInfo="pageInfo" @change="handleChange"></Pagination>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
import AddData from './components/add-data.vue'
import Pagination from '@/components/pagination'
import {
  allApi
} from '@/api/allApi';
let timeout;
export default {
  components: { AddData, Pagination },
  data() {
    //这里存放数据
    return {
      disabled: false, //新增页面 是否禁用
      categoryList: [],// 左侧分类
      activeId: 1,
      pageInfo: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
      table: {
        columns: [
          {
            type: 'selection',
            width: 55,
            align: 'center'
          },
          {
            title: '网站名称',
            width: 150,
            slot: 'website_name'
          },
          {
            title: '网站域名',
            width: 200,
            slot: 'website_domain'
          },
          {
            title: '备案许可号',
            width: 120,
            key: 'filing_license_no'
          },
          {
            title: '主办者',
            width: 150,
            key: 'sponsor'
          },
          {
            title: '营业地',
            width: 150,
            key: 'place_business'
          },
          {
            title: '办公地址',
            width: 150,
            key: 'office_address'
          },
          {
            title: '接入地',
            width: 150,
            key: 'access_point'
          },
          {
            title: 'IP地址',
            width: 150,
            key: 'ip_address'
          },
          {
            title: 'IP所在地',
            width: 150,
            key: 'ip_location'
          },
          {
            title: '检测时间',
            width: 150,
            key: 'detectioned_at'
          },
          {
            title: '操作',
            fixed: 'right',
            width: 80,
            slot: 'action',
          },
        ],
        data: [{}, {}, {}]
      },
      itemData: null, // 编辑时候字段
      selectList: [], // 选择的list
      sendParams: {
        filing_type: null, // 分类id
        page: 1,
        website_name: null
      }
    };
  },
  mounted() {
    this.$store.dispatch('setActiveTab', 1)
    if(this.$route.query.itemData){
      this.activeId = 2
      this.itemData = JSON.parse(this.$route.query.itemData)
    }
    this.fetchData()
  },
  watch: {
    '$store.state.app.searchTxt'(nVal) {
        this.debounce(this.onSearch(nVal))
    }
  },
  //方法集合
  methods: {
    onSearch(nVal){
      this.sendParams.website_name = nVal
      this.sendParams.page = 1
      this.websiteList()
    },
     debounce(func, wait = 300, immediate = false) {
      // 清除定时器
      if (timeout !== null) clearTimeout(timeout);
      // 立即执行，此类情况一般用不到
      if (immediate) {
        var callNow = !timeout;
        timeout = setTimeout(function () {
          timeout = null;
        }, wait);
        if (callNow) typeof func === 'function' && func();
      } else {
        // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
        timeout = setTimeout(function () {
          typeof func === 'function' && func();
        }, wait);
      }
    },
    // 点击左侧分类
    onType(item) {
      this.activeId = null
      this.sendParams.filing_type = item
      this.fetchData()
    },
    // 获取数据
    fetchData() {
      this.sensitiveCategory()
      this.websiteList()
      // this.sensitiveWords()
    },
    // 编辑
    onEdit(row, disabled) {
      this.activeId = 2
      this.itemData = row
      this.disabled = disabled
    },
    // 选择
    handleSelectChange(e) {
      this.selectList = e
    },
    // 改变页面
    handleChange(e) {
      this.sendParams.page = e.page;
      this.sendParams.pageNum = e.pageNum;
      this.websiteList();
    },
    // 点击分类
    onList() {
      this.sendParams.filing_type = null
      this.toList()
    },
    // 切换为列表
    toList() {
      this.activeId = 1
      this.websiteList()
    },
    // 获取网站列表
    async websiteList() {
      this.$Spin.show();
      try {
        const res = await allApi.websiteList(this.sendParams)
        this.table.data = res.data.rows
        this.pageInfo.pageTotal = res.data.total
      } catch (error) {
        console.log(error);
      }
      this.$Spin.hide();
    },
    // 敏感词列表
    async sensitiveWords() {
      this.$Spin.show();
      try {
        const res = await allApi.sensitiveWords()
        // this.list = res.data 
      } catch (error) {
        console.log(error);
      }
      this.$Spin.hide();
    },
    // 敏感词分类
    async sensitiveCategory() {
      this.$Spin.show();
      try {
        const res = await allApi.sensitiveCategory()
        this.categoryList = res.data.rows
        // 获取敏感词list
        // this.sensitiveWords()
      } catch (error) {
        console.log(error);
      }
      this.$Spin.hide();
    },
    // 删除
    async onDel() {
      if (this.selectList.length == 0) {
        this.$Message.warning('请选中数据')
        return
      }
      try {
        this.$Spin.show()
        const idArray = this.selectList.map((mItem) => {
          return mItem.id
        })
        const params = { ids: idArray.join(',') }
        await allApi.websiteDel(params)
        this.$Message.success('删除成功')
        this.fetchData()
      } catch (error) {
        console.log(error);
      }
      this.$Spin.hide()
    },
    // 新增
    onAdd(val) {
      this.itemData = null
      this.disabled = false
      this.activeId = val
      this.sendParams.filing_type = null
    },
    onItem(val) {
      this.activeId = val
    }
  },
}
</script>
<style lang='less' scoped>
.page-box {
  display: flex;
  height: 100%;
  .page-left {
    width: 210px;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 33px;
    cursor: pointer;
    .tab-item {
      padding-top: 24px;
      width: 100%;
      color: #fff;
      text-align: left;
      .item-title {
        font-size: 18px;
        font-weight: bold;
        padding-left: 33px;
      }
      .active-tab {
        background: #fff;
        height: 38px;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
        padding-left: 33px;
        color: #0064ef;
        line-height: 38px;
      }
      .item-desc {
        margin-top: 16px;
        padding-left: 33px;
      }
      .active-desc {
        font-weight: bold;
        background: #fff;
        height: 38px;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
        padding-left: 33px;
        color: #0064ef;
        line-height: 38px;
      }
    }
    .button-item-box {
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 24px;
      padding-left: 33px;
      .button-item {
        width: 84px;
        height: 22px;
        border-radius: 10px;
        font-size: 18px;
        color: #fff;
        line-height: 1.4;
      }
      .add-icon-h {
        width: 22px;
        height: 22px;
        margin-right: 10px;
      }
      .add-item {
        background: url("../../assets/img/add.png") top center no-repeat;
        background-size: 100% 100%;
        padding-left: 10px;
      }
      .active-add {
        color: #0064ef;
        font-size: 18px;
        width: 100%;
      }
      .del-item {
        background: url("../../assets/img/del.png") top center no-repeat;
        background-size: 100% 100%;
        padding-left: 10px;
      }
    }
    .active-item {
      background: #fff;
      height: 38px;
      border-top-left-radius: 18px;
      border-bottom-left-radius: 18px;
      line-height: 30px;
      position: relative;
      .button-item {
        background: transparent;
        color: #0064ef;
      }
    }
  }
  .page-right {
    width: 100%;
    overflow: hidden;
    .table-box {
      height: 78vh;
      padding: 20px 80px;
      border-top-right-radius: 20px;
      border-top-left-radius: 20px;
      background: #ffffff;
      overflow: scroll;
      position: relative;
      .table-content{
        height: 400px;
      }
      .pageination-box{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 5%;
        margin: 0 auto;
      }
    }
  }
}
/deep/ .ivu-table th {
  background-color: #0064ef;
  color: #fff;
  font-weight: normal;
}
/deep/ .ivu-table-stripe .ivu-table-body tr:nth-child(n) td,
.ivu-table-stripe .ivu-table-fixed-body tr:nth-child(n) td {
  background-color: #edf0ff;
}
/deep/ .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
.ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
  background-color: #d4e1fe;
}
/deep/ .ivu-table:before {
  content: none;
}
/deep/ .ivu-table-fixed-body .ivu-table-tbody tr:nth-child(n) td,
.ivu-table-stripe .ivu-table-fixed-body tr:nth-child(n) td {
  background-color: #edf0ff;
}
/deep/ .ivu-table-fixed-body .ivu-table-tbody tr:nth-child(2n) td,
.ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
  background-color: #d4e1fe;
}
</style>